
<template>
    <div class="login" >
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    欢迎登录
                </p>
                <div class="form-con">
                    <Form ref="loginForm" >
                        <FormItem prop="userName">
                            <Input placeholder="请输入用户名" v-model="username">
                            <span slot="prepend">
                                <Icon :size="16" type="person"></Icon>
                            </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input type="password" placeholder="请输入密码" v-model="password">
                            <span slot="prepend">
                                <Icon :size="14" type="locked"></Icon>
                            </span>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" long @click="login">登录</Button>
                        </FormItem>
                    </Form>                   
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username:'',
            password:'',
        };
    },
    mounted() {

    },
    methods: {
        login(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/login`,
                data: qs.stringify({username:this.username, password:this.password})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        if (response.data.data.length != 0) {
                            localStorage.setItem("aid", response.data.data[0].id);
                            localStorage.setItem("name", response.data.data[0].name);
                            localStorage.setItem("mid", response.data.data[0].mid);   
                            this.$router.push("main");     
                        }else{
                            alert("账号或密码错误！");
                        }                                              
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },       
    }    
};
</script>

<style>
.login {
    width: 100%;
    height: 100vh;
    background-image: url("https://file.iviewui.com/iview-admin/login_bg.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
}
.login-con {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
}

.form-con {
    padding: 10px 0 0;
}
</style>
